<template>
  <div ref="iconSelectRef" style="width: 100%">
    <el-row :gutter="24">
      <el-col :span="7">
        <el-select
          v-model="selectData.province"
          placeholder="选择省"
          @change="loadCity($event)"
          :disabled="areaData.province.length == 0"
        >
          <el-option
            v-for="item in areaData.province"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-col>
      <el-col :span="7">
        <el-select
          v-model="selectData.city"
          placeholder="选择市"
          @change="loadDistrict($event)"
          :disabled="areaData.city.length == 0"
        >
          <el-option
            v-for="item in areaData.city"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-col>
      <el-col :span="7">
        <el-select
          v-model="selectData.district"
          placeholder="选择区"
          @change="finishSelect($event)"
          :disabled="areaData.district.length == 0"
        >
          <el-option
            v-for="item in areaData.district"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import AreaAPI from "@/api/area";
import { watchEffect } from "vue";
const props = defineProps({
  modelValue: {
    type: Array,
    default: () => [],
  },
});

const emits = defineEmits(["update:modelValue"]);
const selectData = reactive({
  province: "",
  city: "",
  district: "",
});
const areaData = reactive({
  province: [],
  city: [],
  district: [],
});

onMounted(() => {
  loadProvince();
});
watchEffect(() => {
  const params = props.modelValue;
  if (params?.length > 0) {
    selectData.province = params?.[0];
    loadCity(params?.[0], true);
    loadDistrict(params?.[1], true);
    selectData.city = params?.[1];
    selectData.district = params?.[2];
  }
});
/**
 * 加载省级列表
 */
async function loadProvince() {
  areaData.province = await AreaAPI.getList();
  areaData.city = [];
  areaData.district = [];
  selectData.city = "";
  selectData.district = "";
}

async function loadCity(code, init = false) {
  const params = props.modelValue;
  areaData.city = await AreaAPI.getList(code);
  areaData.district = [];

  if (init && params?.length > 0) {
    selectData.city = params?.[1];
  } else {
    selectData.city = "";
    selectData.district = "";
  }
}
async function loadDistrict(code, init = false) {
  const params = props.modelValue;
  areaData.district = await AreaAPI.getList(code);
  if (init && params?.length > 0) {
    selectData.district = params?.[2];
  } else {
    selectData.district = "";
  }
}
function finishSelect(code) {
  console.log(111, selectData);
  emits("update:modelValue", selectData);
}
</script>

<style scoped lang="scss">
.reference :deep(.el-input__wrapper),
.reference :deep(.el-input__inner) {
  cursor: pointer;
}

.icon-container {
  display: flex;
  flex-wrap: wrap;

  .icon-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    margin: 4px;
    cursor: pointer;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    transition: all 0.3s;
  }

  .icon-item:hover {
    border-color: #4080ff;
    scale: 1.2;
  }
}
</style>
